<template>
        <div id="item">
          <el-row :gutter="20" v-for="(item,index) in imgInfo" :key="index">

             <el-col :span="2">
                <div class="grid-content bg-purple">
                    <el-checkbox @change="checkItem(item.id,index)" v-model="item.is_all"></el-checkbox>
                </div>
            </el-col>

            <el-col :span="2"><div class="grid-content bg-purple">{{item.id}}</div></el-col>

            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <img width="220" height="80" :src="item.imgPath" style="margin-top:10px;">
                </div>
            </el-col>

            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-switch v-model="item.is_Show" active-text="审核是否通过" @change="is_Show($event,item.id)"> </el-switch>
                </div>
            </el-col>

            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button type="primary" icon="el-icon-delete" title="删除" @click="imgDownDelete(item.id)">删除</el-button>
                    <el-button type="primary" icon="el-icon-edit-outline" title="查看" @click="textEdit(item.id)">查看</el-button>
                </div>
          </el-col>

      </el-row>

    </div>
</template>

<script>
import {updateIsShow} from '@/network/allMessage/imgDown'

export default {
    name:'item',
    data(){
        return{
            //被框框选中的临时数组
            temp_arr:[]
        }
    },
    props:{
        imgInfo:{
            type:[Object,Array,String]
        },
       is_all:{
            type:[Boolean]
        }
    },
    methods:{
        //修改审核的状态
        is_Show(event,id){
            let nowData = {
                operation_type:'update',
                id:id,
                data:event
            }
            updateIsShow(nowData).then( res => {
                //console.log(res)
            }).catch( err => {
                console.log(err)
            })

        },
        //查看足迹
        textEdit(id){
            //replace不会向栈中添加记录
            //push会向栈中添加一条记录
            //router.replace()是替换掉栈顶，而router.push()则是向栈中再堆如一个新记录。
            /*
            注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
            */
           //sessionStorage.removeItem("id")
            this.$router.push({
                name:'imgDownEdit',
                params: { 
                    id:id
                }
            })
        },
        
        //单个删除按钮
        imgDownDelete(id){
            let nowData = {
                operation_type:'delete',
                id:[]
            }
            nowData.id.push({id:id})
            this.$emit('delete_one',nowData)
        },
        
        //多选删除
        checkItem(id,index){
           if(this.imgInfo[index].is_all == true){
                this.temp_arr.push({id:id})
            }

            if(this.imgInfo[index].is_all == false){
                if(this.temp_arr.length !== 0){
                     this.temp_arr.forEach((item,index) => {
                        if(item.id == id){
                            this.temp_arr.splice(index,1)
                        }
                    })
                }
            }
            this.$emit('check_item', this.temp_arr)                              
        }


    },
    watch:{
        //监控是否全选
        is_all(newVal){
            if(newVal == true){
                    this.imgInfo.forEach((item,index) => {
                     if(this.imgInfo[index].is_all == false){
                        this.imgInfo[index].is_all = true
                        this.checkItem(this.imgInfo[index].id,index)
                     }  
                 })
            }else{
                if(this.temp_arr.length == this.imgInfo.length){
                     this.imgInfo.forEach((item,index) => {
                        this.imgInfo[index].is_all = false
                        this.checkItem(this.imgInfo[index].id,index)
                    })
                }
               
            }
            
        }

    }
}
</script>

<style lang="scss" scoped>
.el-row{
    width: 100%;
    margin: 0;
    border-bottom: 2px solid #62b3ff;
    overflow: hidden;
    margin-left: 0 !important;
}
.el-col-2{
    padding-right: 18px !important;
}
.el-col{
    height: 100px;
    line-height: 100px;
}
.grid-content {
      text-align: center;
    }
</style>